<script setup>
import { useRouter } from "vue-router";
import { onMounted, computed, ref } from "vue";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();
let gongkaikeList = computed(() => store.state.gongkaike.list);


const gogkkxq = async(id) => {
 await store.commit('gongkaike/SET_LISTXQ',id)
  router.push("/gkkxq");
};
// 返回
const onClickLeft = () => history.back();
</script>

<template>
  <van-nav-bar title="公开课" left-arrow @click-left="onClickLeft" />
  <div class="box">
    <van-grid :gutter="20" square :column-num="2">
      <van-grid-item
        @click="gogkkxq(item._id)"
        v-for="(item, index) in gongkaikeList"
        :key="index"
      >
        <div class="gke">
          <img :src="item.avatar" alt="" />
          <span>{{ item.name }}</span>
          <div class="gke-rs">
            <span>已报人数{{ item.num }}人</span
            ><span>{{ item.entryFee }}</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>



<style  scoped>
.label {
  padding: 10px 20px 0;
  font-size: 20rpx;
  font-weight: 500;
}
.box {
  margin-top: 10px;
}
.gke-rs {
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}
.gke-rs > span:first-child {
  color: darkgray;
}
.gke-rs > span:last-child {
  color: red;
}
.gke img {
  margin: 0 auto;
  width: 100px;
  display: block;
}
.gke > span {
  font-size: 12px;
  padding: 10px 5px 0 5px;
  display: block;
  text-align: center;
}
.gke {
  padding: 6px 3px;
  width: 100%;
}
</style>